---
id: date-picker
title: Date Picker
description: A component that allows users to select a date from a calendar.
---

<ComponentPreview id="DatePicker" />

## Anatomy

To set up the date picker correctly, you'll need to understand its anatomy and how we name its parts.

> Each part includes a `data-part` attribute to help identify them in the DOM.

<Anatomy id="date-picker" />

## Examples

Learn how to use the `DatePicker` component in your project. Let's take a look at the most basic example

<Example id="basic" />

### Controlled

Use the `value` and `onValueChange` prop to control the date picker's value.

<Example id="controlled" />

### Range Selection

To create a date picker that allows a range selection, you need to:

- Set the `selectionMode` prop to `range`.
- Render multiple inputs with the `index` prop set to `0` and `1`.

<Example id="range" />

### Multiple Months

To create a date picker that allows multiple months, you need to:

- Set the `numOfMonths` prop to the number of months you want to display.
- Use the `datePicker.getOffset({ months: 1 })` prop to offset the date picker to the next month.
- Render a `DatePicker.RangeText` component to display the range text.

<Example id="multiple-months" />

### Inline

Use the `inline` prop to display the date picker directly on the page, without a popup.

> When using the `inline` prop, omit the `Portal`, `Positioner`, and `Content` components to render the calendar inline
> within your layout.

<Example id="inline" />

### Root Provider

Use the `useDatePicker` hook to create the date picker store and pass it to the `DatePicker.RootProvider` component.
This allows you to have maximum control over the date picker programmatically.

<Example id="root-provider" />

> If you're using the `DatePicker.RootProvider` component, you don't need to use the `DatePicker.Root` component.

## API Reference

### Props

<ComponentTypes id="date-picker" />

### Context

These are the properties available when using `UdateUpicker.Context`, `useUdateUpickerContext` hook or `useUdateUpicker`
hook.

<ContextType id="date-picker" />

## Accessibility

### Keyboard Support

<KeyBindingsTable id="date-picker" />
